<template>
  <div class="wh100 footer-body" name="Footer">
    <div class="copyright">Copyright © 2024 </div>
    <div class="version">
      version:
      <span>Electron v{{ versions.electron }}</span>
      <span>Chromium v{{ versions.chrome }}</span>
      <span>Node v{{ versions.node }}</span>
    </div>
  </div>
</template>

<script setup lang="ts" name="Footer">
import { reactive } from 'vue'
const versions = reactive({ ...window.electron.process.versions })
</script>

<style lang="less" scoped>
.footer-body {
  display: flex;
  justify-content: center;
  align-items: center;
  .copyright {
    margin: 0 10px;
  }
  .version {
    margin-left: 20px;
    span {
      margin: 0 10px;
    }
  }
}
</style>
